<template>
  <div class="signUp-page">
    <div class="signUp">
      <div class="signUp-head">
        <span>用户注册</span>
      </div>
      <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px"
               class="demo-ruleForm">
        <el-form-item prop="username" label="代理商简称">
          <el-input v-model="registerForm.username" placeholder="代理商简称"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" placeholder="密码" v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item prop="companyName" label="公司名称">
          <el-input placeholder="公司名称" v-model="registerForm.companyName"></el-input>
        </el-form-item>
        <el-form-item prop="contactPerson" label="联系人">
          <el-input placeholder="联系人" v-model="registerForm.contactPerson"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNumber" label="手机号">
          <el-input placeholder="手机号" v-model="registerForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item prop="qq" label="QQ号">
          <el-input placeholder="QQ号" v-model="registerForm.qq"></el-input>
        </el-form-item>
        <el-form-item prop="wechat" label="微信号">
          <el-input placeholder="微信号" v-model="registerForm.wechat"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('registerForm')">确定</el-button>
          <el-button @click="resetForm('registerForm')">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import loginLogo from '../components/LoginLogo'
import mixin from '../mixins'
import {SignUp} from '../api/index'

export default {
  name: 'SignUp-page',
  mixins: [mixin],
  components: {
    loginLogo
  },
  data () {
    let qq_wechat_check = (rule, value, callback) => {
      if (!this.registerForm.qq && !this.registerForm.wechat) {
        return callback(new Error('请输入qq号或者微信号'))
      } else {
        callback()
      }
    }
    return {
      registerForm: { // 注册
        username: '',
        password: '',
        companyName: '',
        contactPerson: '',
        phoneNumber: '',
        qq: '',
        wechat: ''
      },
      rules: {
        username: [{required: true, message: '请输入简称', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        companyName: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
        contactPerson: [{required: true, message: '请输入联系人信息', trigger: 'blur'}],
        phoneNumber: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        qq: [{validator: qq_wechat_check, trigger: 'blur'}],
        wechat: [{validator: qq_wechat_check, trigger: 'blur'}]
      },
    }
  },
  methods: {
    SignUp () {
      let _this = this
      SignUp(this.registerForm)
        .then(res => {
          if (res.data.code === 200) {
            _this.$message.success({message: res.data.msg, duration: 2 * 1000})
            setTimeout(function () {
              _this.$router.push('/')
            }, 2000)
          } else {
            _this.$message.error({message: res.data.msg, duration: 2 * 1000})
          }
        })
        .catch(error => {
          _this.$message.error({message: error.data.msg, duration: 2 * 1000})
        })
    },
    go_back (index) {
      this.$router.go(index)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.SignUp()
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/sign-up.scss';
</style>
